<template>
	<view class="popup">
		
			<u-popup :show="show" mode="center" :round="10"  @close="close" @open="open">
		       <u-toast ref="uToast"></u-toast>
				<view class="popup-content">										
					<view class="screen" v-show="!getMethods">
						<!-- //填写条件筛选信息 -->
						<view class="title">填写相关信息</view>
						<view class="title">
							将为为您挑选合适的纸条
						</view>
						<view class="age">
							<view>输入年龄区间</view>
							<view class="age-input">
								<u--input
								    placeholder="请输入最小年龄"
								    border="surround"
								    v-model="start_age"
									type="number"
								  ></u--input>
								  -
								<u--input
								    placeholder="请输入最大年龄"
								    border="surround"
								    v-model="end_age"
									type="number"
								  ></u--input>
							</view>
						</view>
							
						<view class="sex">
							<view class="">
								选择性别
							</view>
							  <u-radio-group
							    v-model="sex"
							  >
							    <u-radio
							      :customStyle="{marginBottom: '8px'}"
							      v-for="(item, index) in sexList"
							      :key="index"
							      :label="item.name"
							      :name="item.value"
							    >
							    </u-radio>
							  </u-radio-group>
						</view>											
						<view class="btn">
							<u-button type="primary" text="确定" @click="chooesMethods"></u-button>
						</view>						
					</view>
					
					<view class="getMethods" v-show="getMethods">
						<!-- 选择获取方式 -->
						<button @click="random">随机抽取</button>
						<button  @click="toGetPaper">按需筛选</button>
					</view>

				</view>
			</u-popup>
	</view>
</template>

<script>
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			show(){
					this.getMethods=true
			}
		},
		data(){
			return {
				start_age:'',
				end_age:'',
				sex:'男',
				sexList:[{name:'男',value:'男'},{name:'女',value:'女'}],
				getMethods:true//获取方式
			}
		},	
		mounted() {
				this.initPopup
			},
		computed:{
			initPopup(){
			
				this.start_age=this.$store.state.getPaper.popup.start_age
				this.end_age=this.$store.state.getPaper.popup.end_age
				this.sex=this.$store.state.getPaper.popup.sex
			}
		},
		methods:{				
			isEmpty(){		
				console.log(this.start_age,this.end_age)
				if(!this.start_age||!this.end_age){
				
					return true
				}
				return false
			},
			random(){
				this.getMethods=false			
			},
			chooesMethods(){
				
				if(this.isEmpty()){
				
					this.$refs.uToast.show({
						message: '请将内容补充完整！',
						type: 'error',
						duration: 1000
					})
					return 
				}
		
				this.$store.commit('getPaper/initPopup',{start_age:this.start_age,end_age:this.end_age,sex:this.sex})
				uni.navigateTo({
					url:'/pages/showPaper/showPaper'
				})
			},
			toGetPaper(){				
				uni.navigateTo({
					url:'/pages/PaperList/paperList'
				})
			},
			close(){
				this.$emit('close')
			},
			open(){
				console.log('我打开了')
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup-content{
		width: 70vw;
		min-height: 500rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-content: flex-start;
		flex-wrap: wrap;
			
		.screen{
			width: 100%;
			display: flex;
			justify-content: center;
			align-content: flex-start;
			flex-wrap: wrap;
		}
		.title{
			width: 100%;
			height: 60rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 550;
		}
		.sex{
			margin-top: 20rpx;
			width: 100%;
			.u-radio-group{
				justify-content: space-around !important;
			}
		}
		.age{
			margin-top:20rpx ;
			width: 100%;
			.age-input{
				display: flex;
				align-items: center;
			}
		}
	}
	.btn{
		margin-top: 30rpx;
	}
	.getMethods{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		button{
		
			width: 80%;
			height: 150rpx;
			margin: 30rpx 0rpx;
			line-height: 120rpx;
		}
	}
</style>
